<template>
  <div class="component">
    <div class="header">
      <x-header :left-options="{ backText: '' }">
        <header-title :title="$t('customer.customerServiceConfiguration')" />
      </x-header>
    </div>

    <div class="vux-content content">
      <card :header="{title: '客服服务联系人'}">
        <div slot="content" class="card-content">
          <dl>
            <dt>客服服务提供方：</dt>
            <dd>青岛</dd>
          </dl>
          <dl>
            <dt>客服服务对接联系人：</dt>
            <dd>高仁华</dd>
          </dl>
          <dl>
            <dt>客服服务技术支持：</dt>
            <dd>王文哲</dd>
          </dl>
        </div>
      </card>
      <card :header="{title: '客服服务提供方配置'}">
        <div slot="content" class="card-content">
          <dl>
            <dt>白名单配置：</dt>
            <dd>需要将应用服务的IP地址加到客服服务访问白名单中</dd>
          </dl>
        </div>
      </card>
      <card :header="{title: '应用使用配置'}">
        <div slot="content" class="card-content">
          <dl>
            <dt>服务实现：</dt>
            <dd>客服服务功能已经实现，源文件路径：app-template/src/main/java/com/linkdood/app/web/rest/CustomerServiceResource.java</dd>
          </dl>
          <dl>
            <dt>配置文件：</dt>
            <dd>app-template/src/resources/application.yml</dd>
          </dl>
          <dl>
            <dt>豆豆服务名：</dt>
            <dd>调用客服服务需要知道豆豆服务名.<br>配置项为“vrv.customer-service.elogo”</dd>
          </dl>
          <dl>
            <dt>客服调用地址：</dt>
            <dd>获取客服服务访问地址.<br>配置项为“vrv.customer-service.url”<br><b>注：每次获取的访问地址只能使用一次</b></dd>
          </dl>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import { XButton, XHeader, Group, Cell, Card } from 'vux';
import HeaderTitle from '@/components/common/HeaderTitle';

export default {
  name: 'CustomService',
  components: { XButton, XHeader, Group, Cell, HeaderTitle, Card },

}
</script>

<style lang="less" scoped>
.component {
  background-color: #f6f6f6;
  height: 100%;
  /deep/ .vux-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .vux-content {
    height: calc(100% - 45px);
    margin-top: 45px;
    .card-content {
      padding: 14px 15px 10px;
      font-size: 14px;
      line-height: 1.8;
      dl {
        display: flex;
        dt {
          flex: 0 0 auto;
        }
        dd {
          word-break: break-all;
          word-wrap: break-word;
          text-align: justify;
        }
      }
    }
  }
  .content {
    .demo-button {
      width:80%;
      top: 40%;
    }
  }
}
</style>